<template>
  <el-row class="mx__20 px-20 py-20 bg-white main-height">
    <el-col class="current-content-style">
      <el-row>
        <el-col>
          <el-button type="primary" plain @click="visible = true">新增基价</el-button>
        </el-col>
      </el-row>
      <el-row class="my-20">
        <el-table
          size="medium"
          :data="tableData"
          style="width: 100%"
          :header-row-class-name="
            ({ row, rowIndex }) => {
              if (rowIndex === 0) return 'table-header-bg'
            }
          "
        >
          <el-table-column prop="customerTypeName" label="客户类型" width="180"> </el-table-column>
          <el-table-column prop="billingTypeName" label="计费类型"> </el-table-column>
          <el-table-column prop="billingName" label="基价名称"> </el-table-column>
          <el-table-column prop="billingPrice" label="基价金额 (元/吨)"> </el-table-column>
          <el-table-column prop="billingState" label="使用状态">
            <template v-slot="scope">
              <span :class="scope.row.billingState === '1' ? 'text-success' : 'text-danger'">{{
                scope.row.billingState === '1' ? '在用' : '已作废'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="操作">
            <template v-slot="scope">
              <el-button
                v-if="scope.row.billingState === '1'"
                type="text"
                @click="modifyState(scope.row.billingState, scope.row.billingId)"
                class="text-danger"
                icon="el-icon-circle-close"
                >作废</el-button
              >
              <el-button
                v-else
                type="text"
                @click="modifyState(scope.row.billingState, scope.row.billingId)"
                class="text-success"
                icon="el-icon-circle-check"
                >恢复</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="my-20" style="text-align: right">
        <el-col :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <el-dialog title="新增基价" :visible.sync="visible" width="30%" @close="handler_close">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="pr-40">
          <el-form-item label="客户类型" prop="khname">
            <el-select v-model="ruleForm.khname" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.customerTypeName"
                :value="item.customerTypeId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费类型" prop="jfname">
            <el-select v-model="ruleForm.jfname" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.billingTypeName"
                :value="item.billingTypeId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="基价名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="基价金额" prop="price">
            <el-input v-model="ruleForm.price">
              <span slot="append">元</span>
            </el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="addBilingBasePriceHandler">确 定</el-button>
        </span>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script>
// 计费管理
import {
  getCustomerType,
  getBillingTypeList,
  addBilingBasePrice,
  getBilingBasePrice,
  abolishBilingBasePrice,
  enableBilingBasePrice
} from './../config/api'
export default {
  data() {
    return {
      visible: false,
      ruleForm: {
        khname: '',
        jfname: '',
        name: '',
        price: ''
      },
      rules: {
        khname: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
        jfname: [{ required: true, message: '请选择计费类型', trigger: 'change' }],
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        price: [{ required: true, message: '请输入基价价格', trigger: 'blur' }]
      },
      tableData: [1, 2],
      currentPage: 1,
      pageSize: 5,
      pageSizes: [5, 10, 15, 20],
      total: 0,
      options1: [], // 客户类型
      options: [] //计费类型
    }
  },
  async created() {
    await this.getCustomeList()
    await this.getBillingType()
    await this.getBilingBasePriceHandler()
  },
  methods: {
    handler_close() {
      this.$refs['ruleForm'].resetFields()
    },
    // 修改基价的状态
    modifyState(state, id) {
      if (state === '1') {
        abolishBilingBasePrice({ billingId: id }).then(res => {
          if (res.code === 200) {
            this.$message({ message: '作废成功', type: 'success' })
            this.getBilingBasePriceHandler()
          } else {
            this.$message({ message: '作废失败', type: 'error' })
          }
        })
      } else {
        enableBilingBasePrice({ billingId: id }).then(res => {
          if (res.code === 200) {
            this.$message({ message: '恢复成功', type: 'success' })
            this.getBilingBasePriceHandler()
          } else {
            this.$message({ message: '恢复失败', type: 'error' })
          }
        })
      }
    },
    // 查询所有基价
    getBilingBasePriceHandler() {
      getBilingBasePrice({ pageSize: this.pageSize, pageNum: this.currentPage }).then(res => {
        console.log('getBilingBasePrice', res)
        if (res.code !== 200) {
          this.$message({
            message: '查询失败',
            type: 'success'
          })
        } else {
          // 组合后台数据为表格渲染数据
          let tempArr = []
          res.data.list.forEach(el => {
            let obj = { ...el.billing, ...el.billingType, ...el.customerType }
            tempArr.push(obj)
          })
          this.tableData = tempArr
          this.total = res.data.total
        }
      })
    },
    // 添加基价
    addBilingBasePriceHandler() {
      this.$refs['ruleForm'].validate(value => {
        if (value) {
          addBilingBasePrice({
            billingTypeId: this.ruleForm.jfname,
            customerTypeId: this.ruleForm.khname,
            billingName: this.ruleForm.name,
            billingPrice: this.ruleForm.price
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.visible = false
              this.ruleForm = {
                khname: '',
                jfname: '',
                name: '',
                price: 0
              }
              this.getBilingBasePriceHandler()
            } else {
              this.$message({
                message: '添加失败',
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 查询所有计费类型
    async getBillingType() {
      getBillingTypeList().then(res => {
        console.log('options', res)
        if (res.code === 200) {
          this.options = res.data
        }
      })
    },
    // 查询所有客户类型
    async getCustomeList() {
      getCustomerType().then(res => {
        console.log('options1', res)

        if (res.code === 200) {
          this.options1 = res.data
        }
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getBilingBasePriceHandler()
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.getBilingBasePriceHandler()
    }
  }
}
</script>

<style></style>
